<template>
	<div class="layuimini-container">
	    <div class="layuimini-main"  id="tet">
			<fieldset class="table-search-fieldset">
			    <legend>搜索信息</legend>
			    <div style="margin: 10px 10px 10px 10px">
			        <form class="layui-form layui-form-pane" action="">
			            <div class="layui-form-item">
			                <div class="layui-inline">
			                    <label class="layui-form-label">用户姓名</label>
			                    <div class="layui-input-inline">
			                        <input type="text" name="username" autocomplete="off" class="layui-input">
			                    </div>
			                </div>
			                <div class="layui-inline">
			                    <label class="layui-form-label">用户性别</label>
			                    <div class="layui-input-inline">
			                        <input type="text" name="sex" autocomplete="off" class="layui-input">
			                    </div>
			                </div>
			                <div class="layui-inline">
			                    <label class="layui-form-label">用户城市</label>
			                    <div class="layui-input-inline">
			                        <input type="text" name="city" autocomplete="off" class="layui-input">
			                    </div>
			                </div>
			                <div class="layui-inline">
			                    <label class="layui-form-label">用户职业</label>
			                    <div class="layui-input-inline">
			                        <input type="text" name="classify" autocomplete="off" class="layui-input">
			                    </div>
			                </div>
			                <div class="layui-inline">
			                    <button type="submit" class="layui-btn layui-btn-primary"  lay-submit lay-filter="data-search-btn"><i class="layui-icon"></i> 搜 索</button>
			                </div>
			            </div>
			        </form>
			    </div>
			</fieldset>
			<div class="layui-btn-group">
			    <button class="layui-btn" id="btn-expand">全部展开</button>
			    <button class="layui-btn layui-btn-normal" id="btn-fold">全部折叠</button>
			</div>
			<table id="munu-table" class="layui-table" lay-filter="munu-table"></table>
			
			<script type="text/html" id="currentTableBar">
			    <a class="layui-btn layui-btn-normal layui-btn-xs data-count-edit" lay-event="edit">编辑</a>
			    <a class="layui-btn layui-btn-xs layui-btn-danger data-count-delete" lay-event="delete">删除</a>
			</script>
			
		</div>
	</div>
</template>

<script>
	import api from '@/api/system/menu.js'
	import Cookies from 'js-cookie'
	export default {
		data(){
			return{
				
			}
		},
		mounted() {
			//this.initial()
		},
		methods:{
			initial(){
				layui.use(['table','treetable'], function () {
				    var $ = layui.jquery;
				    var table = layui.table;
				    var treetable = layui.treetable;
				    // 渲染表格
				    layer.load(2);
					
					api.MenuRouters().then(res=>{	
						treetable.render({
						    treeColIndex: 1,
						    treeSpid: 0,
						    treeIdName: 'authorityId',
						    treePidName: 'pid',
						    elem: '#munu-table',
						    data: res.data,
						    page: false,
						    cols: [[
						        {type: 'numbers'},
						        {field: 'name', minWidth: 100, title: '部门名称'},
								{field: 'component', minWidth: 100, title: '修改人'},
						        {field: 'permission', title: '创建时间'},
						        {field: 'path', title: '修改时间'},
						        {field: 'sort', width: 80, align: 'center', title: '排序号'},
						        {
						            field: 'type', width: 80, align: 'center', templet: function (d) {
						                if (d.type == -1) {
						                    return '<span class="layui-badge layui-bg-gray">菜单</span>';
						                }
						                if (d.type == 0) {
						                    return '<span class="layui-badge layui-bg-blue">页面</span>';
						                } else {
						                    return '<span class="layui-badge-rim">按钮</span>';
						                }
						            }, title: '类型'
						        },
						        {title: '操作', minWidth: 150, toolbar: '#currentTableBar', align: "center"}
						    ]],
						    done: function () {
						        layer.closeAll('loading');
						    }
						});
					})
				    
				
				    $('#btn-expand').click(function () {
				        treetable.expandAll('#munu-table');
				    });
				
				    $('#btn-fold').click(function () {
				        treetable.foldAll('#munu-table');
				    });
				
				    //监听工具条
				    table.on('tool(munu-table)', function (obj) {
				        var data = obj.data;
				        var layEvent = obj.event;
				
				        if (layEvent === 'del') {
				            var  index = layer.open({
				                type: 1,
				                content: "str" //注意，如果str是object，那么需要字符拼接。
				              });
							  $(window).on("resize", function () {
							      layer.full(index);
							  });
				        } else if (layEvent === 'edit') {
				            var index = layer.open({
				                title: '添加用户',
				                type: 2,
				                shade: 0.2,
				                maxmin:true,
				                shadeClose: true,
				                area: ['50%', '50%'],
				                content: '/admin/home',
				            });
				            $(window).on("resize", function () {
				                layer.full(index);
				            });
				        }
				    });
				});
			}
		}
	}
</script>

<style>
</style>
